<template>
  <div class="box1">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row class="box2">
          <el-col :span="23" :offset="1">
            <div class="demo-input-size">
              <el-input
                placeholder="请输入藏品名"
                prefix-icon="el-icon-user"
                v-model="input1"
              >
              </el-input>

              <el-button
                type="primary"
                class="el-icon-zoom-in"
                style="margin-left: 18px"
                @click="searchUser(input1)"
                >搜索</el-button
              >
              <el-button type="info" class="el-icon-refresh" @click="resetUser"
                >重置</el-button
              >
            </div>
          </el-col>
        </el-row>

        <el-row style="position: relative; top: 18px">
          <el-col :span="23" :offset="1">
            <el-popconfirm title="确定删除这个收藏吗？ " @confirm="deleteOrder">
              <el-button slot="reference" type="danger" icon="el-icon-delete"
                >删除</el-button
              >
            </el-popconfirm>
          </el-col>
        </el-row>
      </div>
      <el-empty v-if="openss" description="购物车为空"></el-empty>
      <el-row v-else>
        <el-col :span="23" :offset="1">
          <el-table
            ref="multipleTable"
            :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="rowClick"
            @select="selectone"
            @select-all="selectall"
            :row-key="getRowKeys"
          >
            <el-table-column type="selection" :reserve-selection="true">
            </el-table-column>

            <el-table-column label="购物车编号">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>

            <el-table-column prop="name" label="藏品名"> </el-table-column>

            <el-table-column label="藏品图">
              <template slot-scope="scope">
                <img class="userimg" :src="scope.row.imgsrc" />
              </template>
            </el-table-column>

            <el-table-column label="藏品数量">
              <template slot-scope="scope">
                <el-button disabled round style="float: left">-</el-button>
                <el-input
                  :disabled="true"
                  class="rrr"
                  v-model="scope.row.number"
                ></el-input>
                <el-button disabled round style="float: left">+</el-button>
              </template>
            </el-table-column>

            <el-table-column prop="sell" label="藏品价格"> </el-table-column>

            <el-table-column prop="createtime" label="购物车创建时间">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-popconfirm
                  confirm-button-text="好的"
                  cancel-button-text="不用了"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除这个收藏吗？ "
                  @confirm="deleteOrder(scope.row.id)"
                >
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    slot="reference"
                    circle
                  ></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div class="btn">
        <button :style="jiesuan" @click="JieSuan" class="bottn">结算</button>
        <div
          style="
            float: right;
            margin-right: 54px;
            position: relative;
            top: 10px;
          "
        >
          <span>合计：</span><span style="color: red">{{ sells }}</span>
        </div>
        <div
          style="
            float: right;
            margin-right: 54px;
            position: relative;
            top: 10px;
          "
        >
          <span>以选藏品</span><span style="color: red">{{ count }}</span
          ><span>件</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import ShopCheApi from "@/api/order/ShopCheApi";
export default {
  name: "ShoppingCart",
  data() {
    return {
      test: 0,
      input1: "",
      count: 0,
      sells: 0.0,
      openss: true,
      tableData: [
        {
          id: 1,
          name: "王小虎",
          imgsrc:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          number: 11,
          sell: "13294560213",
          createTime: "2022-1-2",
        },
      ],
      ids: [],
      orderdto: "",
      //   "float: right; background: #FF5000; cursor: pointer"
      // "float: right; background: #B0B0B0; cursor: not-allowed",
      jiesuan: "float: right; background: #B0B0B0; cursor: not-allowed",
      // 当前页
      currentPage: 1,
      // 每页显示的数据条数
      pageSize: 5,
      // 总条数
      totalNum: 10,

      formLabelWidth: "120px",
    };
  },
  created() {
    this.queryList();
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    searchUser() {
      // 搜索按钮回调
      console.log(this.input1);
      ShopCheApi.listChe(this.input1, sessionStorage.getItem("userId")).then(
        (res) => {
          if (res.data.code != 1) {
            this.tableData = [
              {
                id: "",
                name: "",
                imgsrc: "",
                number: "",
                sell: "",
                createTime: "",
              },
            ];
            this.$message.error(res.data.message);
            this.openss = true;
          } else {
            this.tableData = res.data.data;
            this.openss = false;
            this.$message.success(res.data.message);
          }
        }
      );
    },
    resetUser() {
      // 重置按钮
      this.input1 = "";
      this.searchUser(null);
    },
    queryList() {
      ShopCheApi.listChe(null, sessionStorage.getItem("userId")).then((res) => {
        console.log(res.data);
        if (res.data.code != 1) {
          this.tableData = [
            {
              id: "",
              name: "",
              imgsrc: "",
              number: "",
              sell: "",
              createTime: "",
            },
          ];
          this.openss = true;
        } else {
          this.tableData = res.data.data;
          this.openss = false;
        }
      });
    },
    deleteOrder(id) {
      if (id == null) {
        console.log(this.ids.length);
        ShopCheApi.deleteOrderAll(this.orderdto).then((res) => {
          if (res.data.code != 1) {
            this.$message.error(res.data.message);
          } else {
            this.ids = [];
            this.count = 0;
            this.sells = 0;
             this.jiesuan = "float: right; background: #B0B0B0; cursor: not-allowed";
            this.queryList();
            this.$message.success(res.data.message);
          }
        });
      } else {
        // console.log(id);
        ShopCheApi.deleteOrderById(id).then((res) => {
          if (res.data.code != 1) {
            this.$message.error(res.data.message);
          } else {
            this.queryList();
            this.$message.success(res.data.message);
          }
        });
      }
    },
    selectone(selection, row) {
      //   console.log(selection);
      this.count = 0;
      this.sells = 0;
      var arr = selection;
      if (selection.length > 0) {
        this.jiesuan = "float: right; background: #FF5000; cursor: pointer";
      } else {
        this.jiesuan = "float: right; background: #B0B0B0; cursor: not-allowed";
      }
      for (var i = 0; i < arr.length; i++) {
        // console.log(arr[i].id);
        this.count += arr[i].number;
        this.sells += arr[i].sell;
      }
      this.orderdto = selection;
    },

    selectall(selection) {
      // console.log(selection)
      this.count = 0;
      this.sells = 0;
      var arr = selection;
      if (selection.length > 0) {
        this.jiesuan = "float: right; background: #FF5000; cursor: pointer";
      } else {
        this.jiesuan = "float: right; background: #B0B0B0; cursor: not-allowed";
      }
      for (var i = 0; i < arr.length; i++) {
        // console.log(arr[i].id);
        this.count += arr[i].number;
        this.sells += arr[i].sell;
      }
      this.orderdto = selection;
    },

    JieSuan() {
      console.log(this.orderdto);
      ShopCheApi.JieSuan(this.orderdto).then((res) => {
        if (res.data.code != 1) {
          this.$message.error(res.data.message);
        } else {
          this.queryList();
          this.$message.success(res.data.message);
        }
      });
    },
    handleSelectionChange(val) {
      // 每当选择发送变化时调此回调函数
      this.multipleSelection = val;
      // console.log(val);
      for (var item of val) {
        this.ids.push(item.id);
        // console.log(item.id)
        // this.count+=item.number
      }
      //   console.log(this.ids);
    },
    rowClick(val) {
      // 当列被点击时触发回调函数
      //   console.log(val);
    },
    changeSwitch(val) {
      // 用户状态的回调函数
      console.log(val);
    },
    handleSizeChange(val) {
      //每页条数改变时触发
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // 当前页发生改变的回调
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.box1 {
  /* background-color: pink; */
  position: relative;
  top: 25px;

  width: 80%;
  margin: 0 auto;
}
.box2 {
  /* background-color: rgb(4, 44, 117); */
  /* top: 4%; */
  left: -5px;
  top: 15px;
  position: relative;
}
.el-row {
  margin-bottom: 20px;
}
.el-input,
.el-select {
  width: 200px;
  margin-right: 50px;
}

.el-table {
  /* background-color: rgb(198, 95, 95); */
}
.el-table::before {
  width: auto;
}
.userimg {
  width: 120px;
  height: 120px;
  border-radius: 30%;
}
.el-card {
  border-radius: 36px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  width: 100%;
}
.btn {
  height: 157px;
  padding-top: 51px;
  box-sizing: border-box;
  line-height: 48px;
  font-size: 23px;
  color: #000;
}
.bottn {
  cursor: not-allowed;
  text-decoration: none;
  display: inline-block;
  width: 115px;
  height: 58px;
  line-height: 42px;
  color: #fff;
  background: #b0b0b0;
  -webkit-border-radius: 21px;
  -moz-border-radius: 21px;
  -ms-border-radius: 21px;
  border-radius: 21px;
  text-align: center;
  font: 22px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
}
.rrr {
  width: 60px;
  text-align: center;
}
.el-input[data-v-7130bb88],
.el-select[data-v-7130bb88] {
  margin-right: 0;
  float: left;
}
</style>